<template>
  <div class="chat-container" ref="chatContainer">
    <div
      v-for="(message, index) in messages"
      :key="index"
      :class="['message', message.type + '-message']"
    >
      <div v-if="message.type === 'ai' && message.isCode">
        <div v-html="formatCode(message.content)"></div>
        <div class="message-time">{{ message.time }}</div>
      </div>
      <div v-else>
        <div v-html="formatText(message.content)"></div>
        <div class="message-time">{{ message.time }}</div>
      </div>
    </div>

    <div v-if="isTyping" class="typing-indicator">
      <span>AI正在思考</span>
      <div class="typing-dot"></div>
      <div class="typing-dot"></div>
      <div class="typing-dot"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageList',
  props: {
    messages: {
      type: Array,
      required: true
    },
    isTyping: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    scrollToBottom() {
      this.$nextTick(() => {
        if (this.$refs.chatContainer) {
          this.$refs.chatContainer.scrollTop = this.$refs.chatContainer.scrollHeight;
        }
      });
    },

    formatCode(content) {
      if (content.includes('<think>')) {
        // 尝试从类似XML的内容中提取文本
        const textMatch = content.match(/<think>[\s\S]*?<\/think>[\s\S]*?([^<]+)/);
        if (textMatch && textMatch[1]) {
          return textMatch[1].trim();
        }
      }
      // 简单的代码格式化
      return content.replace(/\n/g, '<br>')
        .replace(/#.*?<br>/g, '<span style="color: #888;">$&</span>')
        .replace(/".*?"/g, '<span style="color: #c66;">$&</span>')
        .replace(/'.*?'/g, '<span style="color: #c66;">$&</span>')
        .replace(/from|import|def|class|return|if|else|for|while/g,
          '<span style="color: #07a;">$&</span>');
    },
    formatText(content) {
      // 将换行转换为br
      return content.replace(/\n/g, '<br>');
    },
  },
  watch: {
    messages: {
      handler() {
        this.scrollToBottom();
      },
      deep: true
    }
  },
  mounted() {
    this.scrollToBottom();
  }
}
</script>

<style scoped>
.chat-container {
  width: 100%;
  flex: 1;
  padding: 25px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="white"/><path d="M0 50 L100 50 M50 0 L50 100" stroke="%23f0f0f0" stroke-width="2"/></svg>') center repeat;
}

.message {
  max-width: 70%;
  padding: 15px 20px;
  border-radius: 18px;
  line-height: 1.5;
  position: relative;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.message-time {
  font-size: 15px;
  text-align: right;
}
.user-message {
  align-self: flex-end;
  background: #3494E6;
  color: white;
  border-bottom-right-radius: 5px;
}

.ai-message {
  align-self: flex-start;
  background: #f0f5ff;
  color: #2c3e50;
  border-bottom-left-radius: 5px;
}

.typing-indicator {
  align-self: flex-start;
  background: #f0f5ff;
  color: #2c3e50;
  border-bottom-left-radius: 5px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background-color: #7f8c8d;
  border-radius: 50%;
  animation: typingAnimation 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingAnimation {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

@media (max-width: 768px) {
  .message {
    max-width: 85%;
  }
}
</style>
